<template>
  <div>
    <!-- 树形数据 -->
    <!-- data：表格的数据 -->
    <!-- default-expand-all：默认展开所以 -->
    <!-- tree-props：属性结构的配置 -->
    <!-- sortable：排序 -->
    <el-table
      :data="tableData"
      style="width: 100%; margin-bottom: 20px"
      row-key="id"
      border
    >
      <el-table-column
        prop="firstcatename"
        label="一级分类"
        width="180"
      ></el-table-column>
      <el-table-column
        prop="secondcatename"
        label="二级分类"
        width="180"
      ></el-table-column>
      <el-table-column
        prop="goodsname"
        label="商品名称"
        width="180"
      ></el-table-column>
      <el-table-column label="商品名称" width="180">
        <template slot-scope="scope">
          <img
            v-if="scope.row.img"
            :src="'http://localhost:3000' + scope.row.img"
            width="100"
          />
        </template>
      </el-table-column>
      <el-table-column
        prop="price"
        label="商品价格"
        width="180"
      ></el-table-column>
      <el-table-column
        prop="market_price"
        label="市场价格"
        width="180"
      ></el-table-column>
      <el-table-column label="是否新品">
        <template slot-scope="scope">
          <el-switch
            v-model="scope.row.isnew"
            active-color="#13ce66"
            inactive-color="#ff4949"
            @change="changeSwitch(scope.row)"
          >
          </el-switch>
        </template>
      </el-table-column>
      <el-table-column label="状态">
        <template slot-scope="scope">
          <!-- scope.row就是v-for循环是的item -->
          <el-tag type="success" v-if="scope.row.status">已启用</el-tag>
          <el-tag type="danger" v-else>已禁用</el-tag>
        </template>
      </el-table-column>
      <el-table-column label="操作">
        <template slot-scope="scope">
          <el-button
            type="primary"
            size="mini"
            @click="edit(scope.row)"
            icon="el-icon-edit"
            circle
          ></el-button>
          <el-button
            type="danger"
            size="mini"
            @click="del(scope.row.id)"
            icon="el-icon-delete"
            circle
          ></el-button>
        </template>
      </el-table-column>
    </el-table>
    <!-- size-change：修改每页显示多少条 -->
    <!-- current-change：修改页码 -->
    <!-- current-page：当前页码数 -->
    <!-- layout：要显示的控件，页码数，跳转，按钮 -->
    <!-- total：数据总量 -->
    <!-- 分页的逻辑：
      关键变量：
      1. 数据总量
      2. 每页显示多少条
      3. 数据总量/每页显示多少条然后向上取整，得到页码数
      4. 当前页码数
     -->
    <el-pagination
      @current-change="handleCurrentChange"
      :current-page="currentPage"
      :page-size="pageSize"
      layout="total, prev, pager, next, jumper"
      :total="total"
    >
    </el-pagination>
  </div>
</template>

<script>
import { getGoodsCount, getGoodsList } from "../../api";
export default {
  data() {
    return {
      tableData: [],
      // 当前页码
      currentPage: 1,
      // 数据总量
      total: 1,
      // 每页显示多少条
      pageSize: 5,
    };
  },
  created() {
    // 自动发请求，获取表格的数据
    this.getTotalData();
  },
  methods: {
    // 页面跳转
    handleCurrentChange(val) {
      // 点击按钮，查看其它页码数据时，要更新currentPage，重新发请求，获取数据
      this.currentPage = val;
      this.getTotalData();
    },
    // 修改开关组件调用的函数
    changeSwitch(val) {
      console.log(val);
      // isnew/ishot值为true时，应改为1；否则是2
      // formData格式！！！！
    },
    async getTotalData() {
      // 获取总条数
      let res1 = await getGoodsCount();
      this.total = res1.list[0].total;
      // 获取分页数据，赋值给tableData
      let res2 = await getGoodsList({
        size: this.pageSize,
        page: this.currentPage,
      });
      // 整理后台数据
      res2.list.forEach(item => {
        item.isnew == 1? item.isnew = true: item.isnew = false;
        item.ishot == 1? item.ishot = true: item.ishot = false;
      });
      this.tableData = res2.list;
    },
    // 编辑
    edit(data) {
      // 打开弹窗，需要通过父组件，子传父
      this.$emit("edit", data);
    },
    // 准备删除
    del(id) {
      this.$confirm("此操作将永久删除该文件, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          // 点击确认按钮，真的删除
          this.delItem(id);
        })
        .catch(() => {
          // 取消删除
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },
    delItem(id) {
      // 真的删除
      this.$http
        .post("/roledelete", { id: id })
        .then((res) => {
          if (res.code === 200) {
            this.$message({
              type: "success",
              message: res.msg,
            });
            // 用新的数据替换老的数据
            this.tableData = res.list;
          } else {
            this.$message({
              type: "danger",
              message: res.msg,
            });
          }
        })
        .catch((err) => {
          console.log(err);
        });
    },
  },
};
</script>

<style>
</style>